<template>
  <div class="music">
    <div class="musicleft">
      <img
        @click="updateDetileShow"
        :src="playList[playListIndex].al.picUrl"
        alt=""
        class="img_tp"
        :class="!zanting ? 'img_tp_active' : 'img_tp_paused'"
      />
      <div class="hezi11">
        <span class="sp1">{{ playList[playListIndex].name }}</span>
        <span class="sp2">{{ playList[playListIndex].ar[0].name }}</span>
      </div>
      <svg
        t="1668416836310"
        class="icona"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4563"
        width="200"
        height="200"
        @click="acc(-1)"
      >
        <path
          d="M364.302083 465.602819L687.954365 218.588294c38.416414-29.327534 93.791393-1.929039 93.791392 46.396277v494.029051c0 48.325316-55.374979 75.725617-93.791392 46.398084L364.302083 558.397181c-30.600916-23.357989-30.600916-69.436372 0-92.794362zM238.945254 780.798397V451.684117v-164.562559c0-19.628152-5.904521-60.475733 17.057907-75.841215 25.523642-17.068744 59.747828 1.210165 59.747828 31.919454v493.676839c0 19.628152 5.915358 60.473927-17.047069 75.841215-25.53448 17.068744-59.758666-1.211971-59.758666-31.919454z"
          fill="#231815"
          p-id="4564"
        ></path>
      </svg>
      <!-- 播放图标 -->
      <svg
        t="1668416869064"
        class="iconb"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6256"
        width="200"
        height="200"
        @click="play()"
        v-if="zanting"
      >
        <path
          d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
          p-id="6257"
        ></path>
      </svg>
      <!-- 暂停图标 -->
      <svg
        t="1668425735348"
        class="iconb"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2680"
        width="200"
        height="200"
        @click="play()"
        v-else
      >
        <path
          d="M191.397656 128.194684l191.080943 0 0 768.472256-191.080943 0 0-768.472256Z"
          p-id="2681"
        ></path>
        <path
          d="M575.874261 128.194684l192.901405 0 0 768.472256-192.901405 0 0-768.472256Z"
          p-id="2682"
        ></path>
      </svg>

      <svg
        t="1668416805394"
        class="iconc"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4000"
        width="200"
        height="200"
        @click="acc(1)"
      >
        <path
          d="M655.706179 465.602819L332.053897 218.588294c-38.414608-29.327534-93.791393-1.929039-93.791392 46.396277v494.029051c0 48.325316 55.376785 75.725617 93.791392 46.398084l323.652282-247.014525c30.602722-23.357989 30.602722-69.436372 0-92.794362zM781.064814 780.798397V451.684117v-164.562559c0-19.628152 5.904521-60.475733-17.057907-75.841215-25.523642-17.068744-59.747828 1.210165-59.747828 31.919454v493.676839c0 19.628152-5.915358 60.473927 17.047069 75.841215 25.532673 17.068744 59.758666-1.211971 59.758666-31.919454z"
          fill="#231815"
          p-id="4001"
        ></path>
      </svg>
      <div class="progress">
        <input
          type="range"
          class="input_pro"
          min="0"
          :max="duration"
          v-model="currentTime"
          step="0.05"
        />
      </div>
      
    </div>
    <div class="musicright">
      <svg
        t="1668420662619"
        class="icond"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="8791"
        width="200"
        height="200"
      >
        <path
          d="M684.418669 175.597559L431.949765 343.89812h-84.168342c-30.958056 0-56.136311 25.069884-56.136311 56.13631v224.364625c0 31.030303 25.178255 56.136311 56.136311 56.13631h84.168342l252.468904 168.300561c30.958056 0 56.136311-25.069884 56.13631-56.136311V231.73387c0-31.030303-25.178255-56.136311-56.13631-56.136311z m-252.468904 420.769464c0 15.49709-12.534942 28.032032-28.032031 28.032032h-28.104279c-15.49709 0-28.032032-12.534942-28.032032-28.032032V428.066462a28.032032 28.032032 0 0 1 28.032032-28.032032h28.104279a28.032032 28.032032 0 0 1 28.032031 28.032032v168.300561z m252.468904 196.332592l-196.332593-122.676262V354.410132l196.332593-122.676262v560.965745z"
          fill="#231815"
          p-id="8792"
        ></path>
      </svg>
      <svg
        t="1668420903282"
        class="icone"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="13596"
        width="200"
        height="200"
      >
        <path
          d="M469.333333 149.333333a21.333333 21.333333 0 0 1 21.333334-21.333333h469.333333a21.333333 21.333333 0 0 1 0 42.666667H490.666667a21.333333 21.333333 0 0 1-21.333334-21.333334z m490.666667 362.666667H64a21.333333 21.333333 0 0 0 0 42.666667h896a21.333333 21.333333 0 0 0 0-42.666667z m0 384H64a21.333333 21.333333 0 0 0 0 42.666667h896a21.333333 21.333333 0 0 0 0-42.666667zM42.666667 384c0-23.626667 12.22-46.34 33.526666-62.32C96 306.84 121.953333 298.666667 149.333333 298.666667c23.333333 0 45.666667 5.946667 64 16.893333V64a21.333333 21.333333 0 0 1 42.666667-1.113333c0.74 14.14 3.52 35.48 12.553333 56.78 5.833333 13.753333 13.546667 25.613333 22.36 34.42a107.46 107.46 0 0 1 20.493334 18.78c12.6 14.853333 22.373333 33.566667 29.04 55.626666a21.333333 21.333333 0 0 1-40.84 12.346667C294.666667 224.666667 287.513333 210.666667 278.846667 200.466667a64.193333 64.193333 0 0 0-13.3-12 21.133333 21.133333 0 0 1-2.96-2.366667q-3.38-3.233333-6.586667-6.813333V384c0 23.626667-12.22 46.34-33.526667 62.32C202.666667 461.16 176.713333 469.333333 149.333333 469.333333s-53.333333-8.173333-73.14-23.013333C54.886667 430.34 42.666667 407.626667 42.666667 384z m42.666666 0c0 23.126667 29.333333 42.666667 64 42.666667s64-19.54 64-42.666667-29.333333-42.666667-64-42.666667-64 19.54-64 42.666667z"
          fill="#5C5C66"
          p-id="13597"
        ></path>
      </svg>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"
    ></audio>
    <van-popup
      v-model:show="detileShow"
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
    >
      <tanchu
        :musicList="playList[playListIndex]"
        :play="play"
        :zanting="zanting"
        :acc="acc"
      />
    </van-popup>
  </div>
</template>

<script>
import { ref, onMounted, getCurrentInstance } from "vue";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      interVal: 0,
    };
  },

  computed: {
    ...mapState([
      "playList",
      "playListIndex",
      "zanting",
      "detileShow",
      "currentTime",
      "duration",
    ]),
    created:{
      
},
  },
  mounted() {
    console.log(this.$refs);
    this.updateTime();
    // localStorage.getItem("key")
   
  },
  updated() {
    this.addDuration();
  },
  methods: {
    play: function () {
      //判断音乐是否播放
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.updatezanting(false);
        this.updateTime();
      } else {
        this.$refs.audio.pause();
        this.updatezanting(true);
        clearInterval(this.interVal);
      }
    },
    acc: function (num) {
      let index = this.playListIndex + num;
      if (index < 0) {
        index = this.playList.length - 1;
      } else if (index == this.playList.length) {
        index = 0;
      }
      this.updateplayListIndex(index);
    },
    addDuration: function () {
      this.updateDuration(this.$refs.audio.duration);
    },
    updateTime: function () {
      this.interVal = setInterval(() => {
        this.updateCurrentTime(this.$refs.audio.currentTime);
      }, 1000);
    },
    ...mapMutations([
      "updatezanting",
      "updateCurrentTime",
      "updateDuration",
      "updateDetileShow",
      "updateplayListIndex",
    ]),
  },
  watch: {
    playListIndex: function () {
      //监听下标 如果发生变化就播放音乐
      this.$refs.audio.autoplay = true;
      if (this.$refs.audio.paused) {
        //如果是暂停状态 就改变图标
        this.updatezanting(false);
      }
    },
    playList: function () {
      if (this.updatezanting) {
        this.$refs.audio.autoplay = true;
        this.updatezanting(false);
      }
    },
    // currentTime: function (newVal) {
    //   if (newVal === this.duration) {
    //     this.updateplayListIndex(this.playListIndex + 1);
    //   }
    // },
    huancun:function(){
      if((playList[playListIndex].al="")){
      playList[playListIndex].al=JSON.parse(sessionStorage.getItem()).al
      console.log(JSON.parse(sessionStorage.getItem()).al);
    }
    }
  },
};
</script>

<style lang="less" scoped>
.music {
  width: 100%;
  height: 80px;
  background-color: white;
  position: fixed;
  bottom: 0;
  border-top: 1px solid gray;
  z-index: 100;
  display: flex;
  padding: 10px;
  justify-content: space-between;
  .musicleft {
    width: 70%;
    height: 100%;
    display: flex;
    img {
      width: 90px;
      height: 90px;
    }
    .sp1 {
      display: flex;
      flex-direction: column;
      font-weight: bolder;
    }
    .sp2 {
      display: flex;
      flex-direction: column;
      margin-top: 5px;
    }
    .icona {
      width: 35px;
      height: 35px;
      margin-left: 270px;
      margin-top: 20px;
    }
    .iconb {
      width: 35px;
      height: 35px;
      margin-left: 40px;
      margin-top: 20px;
    }
    .iconc {
      width: 35px;
      height: 35px;
      margin-left: 40px;
      margin-top: 20px;
    }
  }
  .icond {
    width: 35px;
    height: 35px;
    margin-right: 50px;
    margin-top: 20px;
  }
  .icone {
    width: 35px;
    height: 35px;
    margin-right: 50px;
    margin-top: 20px;
  }
}
.img_tp {
  border-radius: 50%;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  animation: rotate_dt 30s linear infinite;
}
.img_tp_active {
  animation-play-state: running;
}
.img_tp_paused {
  animation-play-state: paused;
}

@keyframes rotate_tp {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.hezi11 {
  width: 300px;
}
.progress {
  margin-top: 50px;
  margin-left: -330px;
}
  .input_pro {
    width: 500px;
  }
</style>